<template>
    <div id="standard" @scroll="scrollToitem">
        <div class="stand-head">
            <span>体测标准</span>
            <span class="fr" @click="cancle">关闭</span>
        </div>

        <div class="slider-bar">
            <div class="slider-item" v-for="(item,index) in physicalItem" @click="locationToitem(item.id,$event)" :key="index">{{item.name}}</div>
            <!-- <div class="slider-item">肺活量</div> -->
        </div>

        <div id="item1" class="stand-list">
            <div class="stand-list-head">
                <span>男生体重指数（BMI）单项评分表（单位：千克/米2）</span>
            </div>
            <el-table :data="boyBMI" size="mini" border :span-method="bmiSpanMethod">
                <el-table-column align='center' prop="level" label="等级"></el-table-column>
                <el-table-column align='center' prop="score" label="评分"></el-table-column>
                <el-table-column align='center' prop="g1" label="一年级"></el-table-column>
                <el-table-column align='center' prop="g2" label="二年级"></el-table-column>
                <el-table-column align='center' prop="g3" label="三年级"></el-table-column>
                <el-table-column align='center' prop="g4" label="四年级"></el-table-column>
                <el-table-column align='center' prop="g5" label="五年级"></el-table-column>
                <el-table-column align='center' prop="g6" label="六年级"></el-table-column>
                <el-table-column align='center' prop="g7" label="初一"></el-table-column>
                <el-table-column align='center' prop="g8" label="初二"></el-table-column>
                <el-table-column align='center' prop="g9" label="初三"></el-table-column>
                <el-table-column align='center' prop="g10" label="高一"></el-table-column>
                <el-table-column align='center' prop="g11" label="高二"></el-table-column>
                <el-table-column align='center' prop="g12" label="高三"></el-table-column>
            </el-table>
        </div>
        <div class="stand-list">
            <div class="stand-list-head"><span>女生体重指数（BMI）单项评分表（单位：千克/米2）</span></div>
            <el-table :data="girlBMI" size="mini" border :span-method="bmiSpanMethod">
                <el-table-column align='center' prop="level" label="等级"></el-table-column>
                <el-table-column align='center' prop="score" label="评分"></el-table-column>
                <el-table-column align='center' prop="g1" label="一年级"></el-table-column>
                <el-table-column align='center' prop="g2" label="二年级"></el-table-column>
                <el-table-column align='center' prop="g3" label="三年级"></el-table-column>
                <el-table-column align='center' prop="g4" label="四年级"></el-table-column>
                <el-table-column align='center' prop="g5" label="五年级"></el-table-column>
                <el-table-column align='center' prop="g6" label="六年级"></el-table-column>
                <el-table-column align='center' prop="g7" label="初一"></el-table-column>
                <el-table-column align='center' prop="g8" label="初二"></el-table-column>
                <el-table-column align='center' prop="g9" label="初三"></el-table-column>
                <el-table-column align='center' prop="g10" label="高一"></el-table-column>
                <el-table-column align='center' prop="g11" label="高二"></el-table-column>
                <el-table-column align='center' prop="g12" label="高三"></el-table-column>
            </el-table>
        </div>
        <div id="item2" class="stand-list">
            <div class="stand-list-head"><span>男生肺活量单项评分表（单位：毫升）</span></div>
            <el-table :data="boyVitalCapacity" size="mini" border :span-method="objectSpanMethod">
                <el-table-column align='center' prop="level" label="等级"></el-table-column>
                <el-table-column align='center' prop="score" label="评分"></el-table-column>
                <el-table-column align='center' prop="g1" label="一年级"></el-table-column>
                <el-table-column align='center' prop="g2" label="二年级"></el-table-column>
                <el-table-column align='center' prop="g3" label="三年级"></el-table-column>
                <el-table-column align='center' prop="g4" label="四年级"></el-table-column>
                <el-table-column align='center' prop="g5" label="五年级"></el-table-column>
                <el-table-column align='center' prop="g6" label="六年级"></el-table-column>
                <el-table-column align='center' prop="g7" label="初一"></el-table-column>
                <el-table-column align='center' prop="g8" label="初二"></el-table-column>
                <el-table-column align='center' prop="g9" label="初三"></el-table-column>
                <el-table-column align='center' prop="g10" label="高一"></el-table-column>
                <el-table-column align='center' prop="g11" label="高二"></el-table-column>
                <el-table-column align='center' prop="g12" label="高三"></el-table-column>
            </el-table>
        </div>
        <div class="stand-list">
            <div class="stand-list-head"><span>女生肺活量单项评分表（单位：毫升）</span></div>
            <el-table :data="girlVitalCapacity" size="mini" border :span-method="objectSpanMethod">
                <el-table-column align='center' prop="level" label="等级"></el-table-column>
                <el-table-column align='center' prop="score" label="评分"></el-table-column>
                <el-table-column align='center' prop="g1" label="一年级"></el-table-column>
                <el-table-column align='center' prop="g2" label="二年级"></el-table-column>
                <el-table-column align='center' prop="g3" label="三年级"></el-table-column>
                <el-table-column align='center' prop="g4" label="四年级"></el-table-column>
                <el-table-column align='center' prop="g5" label="五年级"></el-table-column>
                <el-table-column align='center' prop="g6" label="六年级"></el-table-column>
                <el-table-column align='center' prop="g7" label="初一"></el-table-column>
                <el-table-column align='center' prop="g8" label="初二"></el-table-column>
                <el-table-column align='center' prop="g9" label="初三"></el-table-column>
                <el-table-column align='center' prop="g10" label="高一"></el-table-column>
                <el-table-column align='center' prop="g11" label="高二"></el-table-column>
                <el-table-column align='center' prop="g12" label="高三"></el-table-column>
            </el-table>
        </div>
        <div id="item3" class="stand-list">
            <div class="stand-list-head"><span>男生50米跑单项评分表（单位：秒）</span></div>
            <el-table :data="boyRun50" size="mini" border :span-method="objectSpanMethod">
                <el-table-column align='center' prop="level" label="等级"></el-table-column>
                <el-table-column align='center' prop="score" label="评分"></el-table-column>
                <el-table-column align='center' prop="g1" label="一年级"></el-table-column>
                <el-table-column align='center' prop="g2" label="二年级"></el-table-column>
                <el-table-column align='center' prop="g3" label="三年级"></el-table-column>
                <el-table-column align='center' prop="g4" label="四年级"></el-table-column>
                <el-table-column align='center' prop="g5" label="五年级"></el-table-column>
                <el-table-column align='center' prop="g6" label="六年级"></el-table-column>
                <el-table-column align='center' prop="g7" label="初一"></el-table-column>
                <el-table-column align='center' prop="g8" label="初二"></el-table-column>
                <el-table-column align='center' prop="g9" label="初三"></el-table-column>
                <el-table-column align='center' prop="g10" label="高一"></el-table-column>
                <el-table-column align='center' prop="g11" label="高二"></el-table-column>
                <el-table-column align='center' prop="g12" label="高三"></el-table-column>
            </el-table>
        </div>
        <div class="stand-list">
            <div class="stand-list-head"><span>女生50米跑单项评分表（单位：秒）</span></div>
            <el-table :data="girlRun50" size="mini" border :span-method="objectSpanMethod">
                <el-table-column align='center' prop="level" label="等级"></el-table-column>
                <el-table-column align='center' prop="score" label="评分"></el-table-column>
                <el-table-column align='center' prop="g1" label="一年级"></el-table-column>
                <el-table-column align='center' prop="g2" label="二年级"></el-table-column>
                <el-table-column align='center' prop="g3" label="三年级"></el-table-column>
                <el-table-column align='center' prop="g4" label="四年级"></el-table-column>
                <el-table-column align='center' prop="g5" label="五年级"></el-table-column>
                <el-table-column align='center' prop="g6" label="六年级"></el-table-column>
                <el-table-column align='center' prop="g7" label="初一"></el-table-column>
                <el-table-column align='center' prop="g8" label="初二"></el-table-column>
                <el-table-column align='center' prop="g9" label="初三"></el-table-column>
                <el-table-column align='center' prop="g10" label="高一"></el-table-column>
                <el-table-column align='center' prop="g11" label="高二"></el-table-column>
                <el-table-column align='center' prop="g12" label="高三"></el-table-column>
            </el-table>
        </div>
        <div id="item4" class="stand-list">
            <div class="stand-list-head"><span>男生坐位体前屈单项评分表（单位：厘米）</span></div>
            <el-table :data="boySitAndReach" size="mini" border :span-method="objectSpanMethod">
                <el-table-column align='center' prop="level" label="等级"></el-table-column>
                <el-table-column align='center' prop="score" label="评分"></el-table-column>
                <el-table-column align='center' prop="g1" label="一年级"></el-table-column>
                <el-table-column align='center' prop="g2" label="二年级"></el-table-column>
                <el-table-column align='center' prop="g3" label="三年级"></el-table-column>
                <el-table-column align='center' prop="g4" label="四年级"></el-table-column>
                <el-table-column align='center' prop="g5" label="五年级"></el-table-column>
                <el-table-column align='center' prop="g6" label="六年级"></el-table-column>
                <el-table-column align='center' prop="g7" label="初一"></el-table-column>
                <el-table-column align='center' prop="g8" label="初二"></el-table-column>
                <el-table-column align='center' prop="g9" label="初三"></el-table-column>
                <el-table-column align='center' prop="g10" label="高一"></el-table-column>
                <el-table-column align='center' prop="g11" label="高二"></el-table-column>
                <el-table-column align='center' prop="g12" label="高三"></el-table-column>
            </el-table>
        </div>
        <div class="stand-list">
            <div class="stand-list-head"><span>女生坐位体前屈单项评分表（单位：厘米）</span></div>
            <el-table :data="girlSitAndReach" size="mini" border :span-method="objectSpanMethod">
                <el-table-column align='center' prop="level" label="等级"></el-table-column>
                <el-table-column align='center' prop="score" label="评分"></el-table-column>
                <el-table-column align='center' prop="g1" label="一年级"></el-table-column>
                <el-table-column align='center' prop="g2" label="二年级"></el-table-column>
                <el-table-column align='center' prop="g3" label="三年级"></el-table-column>
                <el-table-column align='center' prop="g4" label="四年级"></el-table-column>
                <el-table-column align='center' prop="g5" label="五年级"></el-table-column>
                <el-table-column align='center' prop="g6" label="六年级"></el-table-column>
                <el-table-column align='center' prop="g7" label="初一"></el-table-column>
                <el-table-column align='center' prop="g8" label="初二"></el-table-column>
                <el-table-column align='center' prop="g9" label="初三"></el-table-column>
                <el-table-column align='center' prop="g10" label="高一"></el-table-column>
                <el-table-column align='center' prop="g11" label="高二"></el-table-column>
                <el-table-column align='center' prop="g12" label="高三"></el-table-column>
            </el-table>
        </div>
        <div id="item5" class="stand-list">
            <div class="stand-list-head"><span>男生一分钟跳绳单项评分表（单位：次）</span></div>
            <el-table :data="boySkip" size="mini" border :span-method="objectSpanMethod">
                <el-table-column align='center' prop="level" label="等级"></el-table-column>
                <el-table-column align='center' prop="score" label="评分"></el-table-column>
                <el-table-column align='center' prop="g1" label="一年级"></el-table-column>
                <el-table-column align='center' prop="g2" label="二年级"></el-table-column>
                <el-table-column align='center' prop="g3" label="三年级"></el-table-column>
                <el-table-column align='center' prop="g4" label="四年级"></el-table-column>
                <el-table-column align='center' prop="g5" label="五年级"></el-table-column>
                <el-table-column align='center' prop="g6" label="六年级"></el-table-column>
            </el-table>
        </div>
        <div class="stand-list">
            <div class="stand-list-head"><span>女生一分钟跳绳单项评分表（单位：次）</span></div>
            <el-table :data="girlSkip" size="mini" border :span-method="objectSpanMethod">
                <el-table-column align='center' prop="level" label="等级"></el-table-column>
                <el-table-column align='center' prop="score" label="评分"></el-table-column>
                <el-table-column align='center' prop="g1" label="一年级"></el-table-column>
                <el-table-column align='center' prop="g2" label="二年级"></el-table-column>
                <el-table-column align='center' prop="g3" label="三年级"></el-table-column>
                <el-table-column align='center' prop="g4" label="四年级"></el-table-column>
                <el-table-column align='center' prop="g5" label="五年级"></el-table-column>
                <el-table-column align='center' prop="g6" label="六年级"></el-table-column>
            </el-table>
        </div>
        <div id="item6" class="stand-list">
            <div class="stand-list-head"><span>男生立定跳远单项评分表（单位：厘米）</span></div>
            <el-table :data="boyStandingLongJump" size="mini" border :span-method="objectSpanMethod">
                <el-table-column align='center' prop="level" label="等级"></el-table-column>
                <el-table-column align='center' prop="score" label="评分"></el-table-column>
                <el-table-column align='center' prop="g7" label="初一"></el-table-column>
                <el-table-column align='center' prop="g8" label="初二"></el-table-column>
                <el-table-column align='center' prop="g9" label="初三"></el-table-column>
                <el-table-column align='center' prop="g10" label="高一"></el-table-column>
                <el-table-column align='center' prop="g11" label="高二"></el-table-column>
                <el-table-column align='center' prop="g12" label="高三"></el-table-column>
            </el-table>
        </div>
        <div class="stand-list">
            <div class="stand-list-head"><span>女生立定跳远单项评分表（单位：厘米）</span></div>
            <el-table :data="girlStandingLongJump" size="mini" border :span-method="objectSpanMethod">
                <el-table-column align='center' prop="level" label="等级"></el-table-column>
                <el-table-column align='center' prop="score" label="评分"></el-table-column>
                <el-table-column align='center' prop="g7" label="初一"></el-table-column>
                <el-table-column align='center' prop="g8" label="初二"></el-table-column>
                <el-table-column align='center' prop="g9" label="初三"></el-table-column>
                <el-table-column align='center' prop="g10" label="高一"></el-table-column>
                <el-table-column align='center' prop="g11" label="高二"></el-table-column>
                <el-table-column align='center' prop="g12" label="高三"></el-table-column>
            </el-table>
        </div>
        <div id="item7" class="stand-list">
            <div class="stand-list-head"><span>男生一分钟仰卧起坐、引体向上单项评分表（单位：次）</span></div>
            <span class="stand-list-tip">注：小学三年级～六年级：一分钟仰卧起坐；初中、高中：引体向上。</span>
            <el-table :data="boySitupChinup" size="mini" border :span-method="objectSpanMethod">
                <el-table-column align='center' prop="level" label="等级"></el-table-column>
                <el-table-column align='center' prop="score" label="评分"></el-table-column>
                <el-table-column align='center' prop="g3" label="三年级"></el-table-column>
                <el-table-column align='center' prop="g4" label="四年级"></el-table-column>
                <el-table-column align='center' prop="g5" label="五年级"></el-table-column>
                <el-table-column align='center' prop="g6" label="六年级"></el-table-column>
                <el-table-column align='center' prop="g7" label="初一"></el-table-column>
                <el-table-column align='center' prop="g8" label="初二"></el-table-column>
                <el-table-column align='center' prop="g9" label="初三"></el-table-column>
                <el-table-column align='center' prop="g10" label="高一"></el-table-column>
                <el-table-column align='center' prop="g11" label="高二"></el-table-column>
                <el-table-column align='center' prop="g12" label="高三"></el-table-column>
            </el-table>
        </div>
        <div id="item8" class="stand-list">
            <div class="stand-list-head"><span>女生一分钟仰卧起坐单项评分表（单位：次）</span></div>
            <el-table :data="girlSitup" size="mini" border :span-method="objectSpanMethod">
                <el-table-column align='center' prop="level" label="等级"></el-table-column>
                <el-table-column align='center' prop="score" label="评分"></el-table-column>
                <el-table-column align='center' prop="g3" label="三年级"></el-table-column>
                <el-table-column align='center' prop="g4" label="四年级"></el-table-column>
                <el-table-column align='center' prop="g5" label="五年级"></el-table-column>
                <el-table-column align='center' prop="g6" label="六年级"></el-table-column>
                <el-table-column align='center' prop="g7" label="初一"></el-table-column>
                <el-table-column align='center' prop="g8" label="初二"></el-table-column>
                <el-table-column align='center' prop="g9" label="初三"></el-table-column>
                <el-table-column align='center' prop="g10" label="高一"></el-table-column>
                <el-table-column align='center' prop="g11" label="高二"></el-table-column>
                <el-table-column align='center' prop="g12" label="高三"></el-table-column>
            </el-table>
        </div>
        <div id="item9" class="stand-list">
            <div class="stand-list-head"><span>男生耐力跑单项评分表（单位：分·秒）</span></div>
            <span class="stand-list-tip">注：小学五年级～六年级：50米×8往返跑；初中、高中：1000米跑。</span>
            <el-table :data="boyEnduranceRun" size="mini" border :span-method="objectSpanMethod">
                <el-table-column align='center' prop="level" label="等级"></el-table-column>
                <el-table-column align='center' prop="score" label="评分"></el-table-column>
                <el-table-column align='center' prop="g5" label="五年级"></el-table-column>
                <el-table-column align='center' prop="g6" label="六年级"></el-table-column>
                <el-table-column align='center' prop="g7" label="初一"></el-table-column>
                <el-table-column align='center' prop="g8" label="初二"></el-table-column>
                <el-table-column align='center' prop="g9" label="初三"></el-table-column>
                <el-table-column align='center' prop="g10" label="高一"></el-table-column>
                <el-table-column align='center' prop="g11" label="高二"></el-table-column>
                <el-table-column align='center' prop="g12" label="高三"></el-table-column>
            </el-table>
        </div>
        <div id="item10" class="stand-list">
            <div class="stand-list-head"><span>女生耐力跑单项评分表（单位：分·秒）</span></div>
            <span class="stand-list-tip">注：小学五年级～六年级：50米×8往返跑；初中、高中：800米跑。</span>
            <el-table :data="girlEnduranceRun" size="mini" border :span-method="objectSpanMethod">
                <el-table-column align='center' prop="level" label="等级"></el-table-column>
                <el-table-column align='center' prop="score" label="评分"></el-table-column>
                <el-table-column align='center' prop="g5" label="五年级"></el-table-column>
                <el-table-column align='center' prop="g6" label="六年级"></el-table-column>
                <el-table-column align='center' prop="g7" label="初一"></el-table-column>
                <el-table-column align='center' prop="g8" label="初二"></el-table-column>
                <el-table-column align='center' prop="g9" label="初三"></el-table-column>
                <el-table-column align='center' prop="g10" label="高一"></el-table-column>
                <el-table-column align='center' prop="g11" label="高二"></el-table-column>
                <el-table-column align='center' prop="g12" label="高三"></el-table-column>
            </el-table>
        </div>
        <div id="item11" class="stand-list">
            <div class="stand-list-head"><span>加分指标---男生、女生一分钟跳绳评分表（单位：次）</span></div>
            <el-table :data="skipExtraScore" size="mini" border>
                <el-table-column align='center' prop="extraScore" label="加分"></el-table-column>
                <el-table-column align='center' prop="g1" label="一年级"></el-table-column>
                <el-table-column align='center' prop="g2" label="二年级"></el-table-column>
                <el-table-column align='center' prop="g3" label="三年级"></el-table-column>
                <el-table-column align='center' prop="g4" label="四年级"></el-table-column>
                <el-table-column align='center' prop="g5" label="五年级"></el-table-column>
                <el-table-column align='center' prop="g6" label="六年级"></el-table-column>
            </el-table>
        </div>
        <div class="stand-list">
            <div class="stand-list-head"><span>加分指标---男生引体向上评分表（单位：次）</span></div>
            <el-table :data="boySitAndReachExtra" size="mini" border>
                <el-table-column align='center' prop="extraScore" label="加分"></el-table-column>
                <el-table-column align='center' prop="g7" label="初一"></el-table-column>
                <el-table-column align='center' prop="g8" label="初二"></el-table-column>
                <el-table-column align='center' prop="g9" label="初三"></el-table-column>
                <el-table-column align='center' prop="g10" label="高一"></el-table-column>
                <el-table-column align='center' prop="g11" label="高二"></el-table-column>
                <el-table-column align='center' prop="g12" label="高三"></el-table-column>
            </el-table>
        </div>
        <div class="stand-list">
            <div class="stand-list-head"><span>加分指标---女生一分钟仰卧起坐评分表（单位：次）</span></div>
            <el-table :data="girlSitAndReachExtra" size="mini" border>
                <el-table-column align='center' prop="extraScore" label="加分"></el-table-column>
                <el-table-column align='center' prop="g7" label="初一"></el-table-column>
                <el-table-column align='center' prop="g8" label="初二"></el-table-column>
                <el-table-column align='center' prop="g9" label="初三"></el-table-column>
                <el-table-column align='center' prop="g10" label="高一"></el-table-column>
                <el-table-column align='center' prop="g11" label="高二"></el-table-column>
                <el-table-column align='center' prop="g12" label="高三"></el-table-column>
            </el-table>
        </div>
        <div class="stand-list">
            <div class="stand-list-head"><span>加分指标---男生1000米跑评分表（单位：分·秒）</span></div>
            <el-table :data="boymi" size="mini" border>
                <el-table-column align='center' prop="extraScore" label="加分"></el-table-column>
                <el-table-column align='center' prop="g7" label="初一"></el-table-column>
                <el-table-column align='center' prop="g8" label="初二"></el-table-column>
                <el-table-column align='center' prop="g9" label="初三"></el-table-column>
                <el-table-column align='center' prop="g10" label="高一"></el-table-column>
                <el-table-column align='center' prop="g11" label="高二"></el-table-column>
                <el-table-column align='center' prop="g12" label="高三"></el-table-column>
            </el-table>
        </div>
        <div class="stand-list">
            <div class="stand-list-head"><span>加分指标---女生800米跑评分表（单位：分·秒）</span></div>
            <el-table :data="girlmi" size="mini" border>
                <el-table-column align='center' prop="extraScore" label="加分"></el-table-column>
                <el-table-column align='center' prop="g7" label="初一"></el-table-column>
                <el-table-column align='center' prop="g8" label="初二"></el-table-column>
                <el-table-column align='center' prop="g9" label="初三"></el-table-column>
                <el-table-column align='center' prop="g10" label="高一"></el-table-column>
                <el-table-column align='center' prop="g11" label="高二"></el-table-column>
                <el-table-column align='center' prop="g12" label="高三"></el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
    import { standards } from "../../assets/mock/standards";
    export default {
        data() {
            return {
                locationNum: this.$util.getUrlParam('locationNum') || 0,
                boyBMI: standards.boyBMI,
                girlBMI: standards.girlBMI,
                boyVitalCapacity: standards.boyVitalCapacity,
                girlVitalCapacity: standards.girlVitalCapacity,
                boyRun50: standards.boyRun50,
                girlRun50: standards.girlRun50,
                boySitAndReach: standards.boySitAndReach,
                girlSitAndReach: standards.girlSitAndReach,
                boySkip: standards.boySkip,
                girlSkip: standards.girlSkip,
                boyStandingLongJump: standards.boyStandingLongJump,
                girlStandingLongJump: standards.girlStandingLongJump,
                boySitupChinup: standards.boySitupChinup,
                girlSitup: standards.girlSitup,
                boyEnduranceRun: standards.boyEnduranceRun,
                girlEnduranceRun: standards.girlEnduranceRun,
                skipExtraScore: standards.skipExtraScore,
                boySitAndReachExtra: standards.boySitAndReachExtra,
                girlSitAndReachExtra: standards.girlSitAndReachExtra,
                boymi: standards.boymi,
                girlmi: standards.girlmi,

                physicalItem: [
                    { name: 'BMI', id: 'item1' },
                    { name: '肺活量', id: 'item2' },
                    { name: '50米跑', id: 'item3' },
                    { name: '坐位体前屈', id: 'item4' },
                    { name: '1分钟跳绳', id: 'item5' },
                    { name: '立定跳远', id: 'item6' },
                    { name: '男生引体向上', id: 'item7' },
                    { name: '1分钟仰卧起坐', id: 'item8' },
                    { name: ' 男生1000米跑、 50*8往返跑', id: 'item9' },
                    { name: "女生800米跑、 50*8往返跑", id: 'item10' },
                    { name: "加分指标", id: 'item11' },
                ],
                standItemList: []
            }
        },
        created() {

        },
        mounted() {
            this.standItemList = [...document.getElementsByClassName('stand-list')].filter(item => {
                return item.getAttribute('id');
            })

            document.getElementsByClassName('slider-item')[this.locationNum].className = 'selected slider-item';
            setTimeout(() => {
                document.getElementById('standard').scrollTop = this.standItemList[this.locationNum].offsetTop - 10
            }, 200)

        },
        methods: {
            locationToitem(id, $event) {
                let len = document.getElementsByClassName('slider-item')
                for (let i = 0; i < len.length; i++) {
                    len[i].className = 'slider-item';

                    if (this.standItemList[i].getAttribute('id') == id) {
                        document.getElementById('standard').scrollTop = this.standItemList[i].offsetTop - 10;
                    };
                }
                $event.target.className = 'selected slider-item';
            },
            scrollToitem() {
                let scrollTop = document.getElementById('standard').scrollTop;
                let len = document.getElementsByClassName('slider-item');

                for (let i = 0; i < this.standItemList.length; i++) {
                    let num = this.standItemList.length - i - 1;
                    let proHeight = this.standItemList[num].offsetTop;

                    if (scrollTop >= proHeight && scrollTop < proHeight + 100) {
                        [...len].forEach(item => {
                            item.className = 'slider-item';
                        })
                        len[num].className = 'selected slider-item';
                    }
                }
            },
            cancle() {
                history.back()
            },
            objectSpanMethod({ row, column, rowIndex, columnIndex }) {
                if (columnIndex === 0) {
                    if (rowIndex == 0) {
                        return {
                            rowspan: 3,
                            colspan: 1
                        };
                    } else if (rowIndex == 3) {
                        return {
                            rowspan: 2,
                            colspan: 1
                        };
                    } else if (rowIndex == 5) {
                        return {
                            rowspan: 10,
                            colspan: 1
                        };
                    } else if (rowIndex == 15) {
                        return {
                            rowspan: 5,
                            colspan: 1
                        };
                    } else {
                        return {
                            rowspan: 0,
                            colspan: 0
                        };
                    }
                }
            },
            bmiSpanMethod({ row, column, rowIndex, columnIndex }) {
                if (columnIndex === 1) {
                    if (rowIndex == 1) {
                        return {
                            rowspan: 2,
                            colspan: 1
                        };
                    } else if (rowIndex == 2) {
                        return {
                            rowspan: 0,
                            colspan: 0
                        };
                    }
                }
            }
        }
    }
</script>
<style>
    #standard {
        height: 100%;
        margin-top: 50px;
        padding-bottom: 70px;
        overflow-y: scroll;
        position: relative;
    }
    #standard .el-table--border, .el-table--group{
        border: 1px solid #666;
    }
    #standard tr,
    #standard th,
    #standard tr td{
        border-color: #666;
    }

    #standard .slider-bar {
        position: fixed;
        top: 60px;
        left: 40px;
    }

    #standard .slider-item {
        display: block;
        width: 120px;
        margin-bottom: 5px;
        text-align: center;
        line-height: 36px;
        background: #F5F5F5;
        border: 1px solid #D0D0D0;
        border-radius: 4px;
        text-decoration: none;
        outline: none;
        color: #B2B2B2;
        cursor: pointer;
    }

    #standard .selected {
        background: #0398FF;
        border: 1px solid rgba(3, 152, 255, 0.40);
        color: #FFFFFF;
    }

    #standard .stand-list {
        width: calc(100% - 240px);
        margin-left: 200px;
    }

    #standard .stand-list-head {
        padding: 10px;
        margin: 10px 0;
        background-color: #ddd;
    }

    #standard .stand-head {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 50px;
        padding: 0 20px;
        line-height: 50px;
        box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.12);
        background-color: #999;
        z-index: 100000;
    }

    #standard .stand-list-tip {
        display: inline-block;
        padding-bottom: 10px;
        color: #999;
    }

    #standard .stand-head .fr {
        padding: 0 30px;
        cursor: pointer;
    }
</style>